<template>
  <el-container id="app">
    <el-aside class="el-aside" width="">
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :collapse-transition="true"
      >
        <el-menu-item index="0">
          <i
            v-if="isCollapse"
            @click="toggleCollapse"
            class="el-icon-s-unfold"
          ></i>
          <i
            v-if="!isCollapse"
            @click="toggleCollapse"
            class="el-icon-s-fold"
          ></i>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <!-- <span slot="title">导航二</span> -->
          <span>导航一</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <i class="el-icon-document"></i>
          <!-- <span slot="title">导航三</span> -->
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <!-- <span slot="title">导航四</span> -->
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-setting"></i>
          <!-- <span slot="title">导航四</span> -->
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="height: 70px">
        <div class="box">
          <el-row class="buttons">
            <el-input placeholder="请输入内容" clearable class="searchInput">
            </el-input>
            <el-button
              icon="el-icon-search"
              circle
              class="searchButton"
            ></el-button>
            <el-button
              type="info"
              icon="el-icon-plus"
              circle
              class="addButton"
              @click="dialogVisible = true"
            ></el-button>
          </el-row>
          <img src="" class="logo" />
        </div>
      </el-header>
      <el-main>
        <template>
          <el-dialog
            title="新增"
            :visible.sync="dialogVisible"
            width=" 50%"
            :before-close="handleDialogClose"
          >

            <el-form>
              <el-form-item label="网站">
                <el-input v-model="form.website"></el-input>
              </el-form-item>
              <el-form-item label="账号">
                <el-input v-model="form.account"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="form.pass"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="form.remark"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click=insert()>提交</el-button>
            </span>
          </el-dialog>
        </template>
        <template>
          <el-table
            class="table"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            height="100%"
          >
            <el-table-column label="网站" width="120" class="tableHeader">
              <template slot-scope="scope">{{ scope.row.website }}</template>
            </el-table-column>
            <el-table-column
              prop="account"
              label="账号"
              width="120"
              class="tableHeader"
            ></el-table-column>
            <el-table-column
              prop="pass"
              label="密码"
              width="120"
              class="tableHeader"
            >
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              show-overflow-tooltip
              class="tableHeader"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  id="editButton"
                  type="primary"
                  size="small"
                  @click="handleEdit(scope.$index, scope.row)"
                  icon="el-icon-edit"
                  circle
                ></el-button>
                <el-button
                  id="deleteButton"
                  type="danger"
                  size="small"
                  icon="el-icon-delete"
                  circle
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import apiConfig from "../config/apiConfig";
import axios from "axios";
export default {
  data() {
    return {
      isCollapse: true,
      tableData: [],
      dialogVisible: false,
      form: {
        website: "",
        account: "",
        pass: "",
        remark: "",
      },
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    fetchData() {
      axios
        .get(apiConfig.getFormData)
        .then((response) => {
          this.tableData = response.data.data; // 假设后端返回的数据是一个数组
        })
        .catch((error) => {
          console.error("获取数据失败", error);
        });
    },
    insert() {
      axios
        .post(apiConfig.insertFormData, {
          website: this.form.website,
          account: this.form.account,
          pass: this.form.pass,
          remark: this.form.remark,
        })
        .then((response) => {
          console.log(response.data);
          this.dialogVisible = false;
          this.fetchData();
       })
    },
    handleDialogClose() {
      this.dialogVisible = false;
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

<style>
.el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close {
    color: #000000 !important;
}
.el-button--primary {
    color: #000000 !important;
    background-color: #f6f6f6 !important;
    border-color: #5d5d5d !important;
}
#editButton {
  color: #505458;
  background-color: #ffffff;
  border-color: #5f5f5f;
}
#deleteButton {
  color: #505458;
  background-color: #ffffff;
  border-color: #5f5f5f;
}
.logo {
  float: right;
  margin: 2px;
}
.el-input__inner {
  border-radius: 8px !important;
}
.searchInput {
  width: 200px;
}
.searchInput:focus {
  border-color: #505458 !important; /* 你可以根据需要更改颜色 */
  outline: none; /* 去掉默认的聚焦轮廓 */
}
.el-input__inner:focus {
  border-color: #505458 !important;
}
.el-button:focus,
.el-button:hover {
  color: #ffffff !important;
  background-color: #505458 !important;
  border-color: #e4e4e4 !important;
}
.searchButton {
  margin-left: 10px !important;
}
.buttons {
  display: flex;
  align-items: center;
  padding: 7px 10px 7px 10px;
  float: left;
}

html,
body {
  height: 100%;
  margin: 0;
}

#app {
  height: 100%;
}

.el-container {
  height: 100%;
}

.el-main {
  padding: 10px 20px 20px 20px !important;
  flex: 1; /* 让 el-main 占据剩余的空间 */
  background-color: #efefef;
  color: #505458;
  text-align: center;
  overflow-y: auto; /* 如果内容过多，可以滚动 */
}

.el-header {
  padding: 10px 20px 5px 20px !important;
  background-color: #efefef;
}

body > .el-container {
  margin-bottom: 40px;
}
.el-aside {
  background-color: #efefef;
}

/* 主菜单样式 */
.el-menu-vertical-demo {
  border-radius: 8px; /* 设置圆角 */
  overflow: hidden; /* 确保内容不会超出圆角 */
  height: 100%;
}

/*子菜单样式*/
.el-menu-item {
  background: #ffffff !important;
}
/*子菜单悬浮样式*/
.el-menu-item:hover {
  color: white !important;
  background: #505458 !important;
}
.el-menu-item.is-active {
  color: #000 !important;
}

/* header box */
.box {
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  border-radius: 8px; /* 设置圆角 */
}

.table {
  border-radius: 8px; /* 设置圆角 */
  overflow: hidden; /* 确保内容不会超出圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.el-table th.el-table__cell {
  height: 40px;
}
</style>
